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لبناء تطبيقات الويب التفاعلية ۸3۸ شرح استخدام تفنية 


اتی تیر جدیدة تو غا ما وان انتظر حتی ترا ها ققکم فی 1۸ھ سعد اله آرقاتگ یکل خير ر هد المرة سابائر شرح فة 
.التطبيقات والسكربتات الاجنبية ... أيضا من باب تحفيزكم لاستخدامها في برامجكم الجديدة ان شاء الله 


:تعريفها 
:وتتكون من التقنيات التالية Asynchronous JavaScript and XML‏ اختصار لعبارة AJAX‏ 


e HTML gyi XHTML gy CSS لعرض المعلومات‎ 

اvaScripهJ‏ لعرض والتفاعل مع المعلومات المعروضة e Document Object Model Jںخ ja‏ 
لتبادل البيانات بشكل متزامن مع المزود او lئخادp XMLHttpRequest‏ کائن » 

.وهي جزء اختياري لن نحتاج إليه حاليا 1× تقنية هم 

ا 


هذه التقنية تستخدم كوسيلة مساعدة في بناء تطبيقات الويب التفاعلية مثلا عند الحاجة لإرسال او جلب بیانات بدون شرح استخدام تقنية 


ڪ Explorer‏ ٤عntern!‏ لبناء تطبيقات الويب التفاعلية. ويمكن استخدامها على آي متصفح يدعم التقنيات المذکورة سابقا وتشمل × ۸3۸ 
.gغıر FireFox s Opera lk‏ 


:مثال عملي 

بناءا على اختيار المستخدم ومن ثم عرضها له بدون شرح استخدام (SQ‏ سنقوم بإنشاء تطبيق يقوم بجلب بيانات من قاعدة بيانات 
لبناء تطبيقات الويب التفاعلية ×۸[۸ تقنية 

:يتكون المثال الذي سنقوم بتطبيقه من ثلاث ملفات 

.ويستخدم لعرض البيانات للمستخدم [دماط.×ع لم ملف م 


.ويستخدم لجلب البيانات من قاعدة البيانات مطم.†وم) ملف ه 


ويحتوي غل دوال الاتصال بالخادم وجلب البيانات وعرضها main.js‏ ملف ه6 


index.html‏ ملف 


HTML:‏ كود 


<html> <head> <title>iqyg</title> <meta http-equiv="Content-Type" content="text, 


¢ 5 
ملف‎ main. 


HTML:‏ كود 


var http = createRequestObject () ; 
function createRequestObj ect () { 
var request_; 

var browser = navigator. appName; 


if (browser == "Microsoft Internet Explorer") { 
request_ = new ActivexObject ("Microsoft.XMLHTTP"); 
} 
else{ 

request = new XMLHttpRequest () 


} 
return request _; 

} 

function getInfo () { 

http.open ('get', 'test.php?id='+ document.myform.myselect.selectedIndex) ; 
http.onreadystatechange = handlelInfo; 

http.send (null) 


} 
function handlelInfo () { 
if (http.readyState == 1) { 


document .getElementById ('mydiv').innerHTML = 'تlنilaبll‎ بلlج ...جاري‎ "7 
} 
if (http.readyState == 4) { 
var response = http.responseText; 
document. getElementById('mydiv').innerHTML = response; 
} 
} 
ملف‎ test.php 


PHP:‏ كود 


<?php 
header ('Content-Type: text/html; charset=windows-1256'); 


SLATES CET ITIP 

PODNSS E=T"LOCALBOS ET"; 

$dbuser="root"; 

Ş$dbpass=""; 

Ş$database="test"; 

SLIinE = CmySdlL EONRECE( SABHOSE;, SABUSEE, SABBASS J; 

db = mysql select db ( Sdatabase, $link ); 

$result = mysql query ("SELECT * FROM mytable WHERE id=$id"); 
wiLLé ( $Fow = mysql Feteh array (SEeSULE) ){ 

echo $row['name']; 


1 
MySQL fFEeS. EeSULE(SEESULE)? 
MySQL CLOSE (SLIAR; 

چ 


:وهو يتكون من تلاثة دوال وز.م1ه ص تركيزنا على ملف 
.لانشاء كائن الاتصال بالخادم create RequestObj ect‏ دall‏ 
test.php‏ لارسال البيانات إلى ملف getIinfo‏ دالة 
وتقوم بعرض البيانات بعد جلبها مfمآ)ءع‏ وهي دالة مساعدة لدالة م۴مآع]لمهط دالة 
createRequestObject‏ في الغالب لن تحتاج للتعديل على دالة 
ولك ان تسميها كما تشاء مÊہآء[ل‏ هط و مÊہآاءع‏ قم بالتعديل فقط في دالتي 
مإ ]مع التعديل الذي ستحتاجه في دالة 
الذي نستخدمه لعرض البيانات php‏ اسم ملف ٠ه‏ 
صإم رم وهو في المثال الحالي ۲1۷1 اسم النموذج في صفحة ه 
نلاحظ أن هذا التغيير سيكون في السطر التالي 
HTML:‏ كود 


http.open ('get', 'test.php?id='+ document.myform.myselect.selectedIndex) ; 


06 ]ال مهم التعديل الذي ستحتاجه في دالة 
الوص الذي ستسخدمه لعرض البيانات وهو في المثال الحالي ۷ال اسم وسم ه 
:نلاحظ ان هذا التغيير سيكون في السطرين التاليين 

HTML:‏ كود 


document .getElementById ('mydiv').innerHTML = 'تlنilaبlاl‎ بلlج ...جاري‎ 7 


document. getElementById('mydiv') .innerHTML = response; 


.حسب إعدادات قاعدة البيانات لديك والمعلومات التي تريد عرضها مطم.اوع) أيضا لاتنسى ان تعدل في ملف 


لخدمات تصمبم وبرمجة المواقع 


programmer4ever@yahoo.com 


002010634 


